﻿@{
   ViewBag.Title = "Index";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    <script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
   <script src="/Scripts/jquery.signalR-0.5.2.js" type="text/javascript"></script>
   <script src="/signalr/hubs" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {

           //View Models

           //Task View Model
           function taskViewModel(id, title, completed, ownerViewModel) {
               this.taskId = id;
               this.title = ko.observable(title);
               this.completed = ko.observable(completed);
               this.remove = function () { ownerViewModel.removeTask(this.taskId) }
               this.notification = function (b) { notify = b }

               var self = this;

               this.title.subscribe(function (newValue) {
                   ownerViewModel.updateTask(ko.toJS(self));
               });

               this.completed.subscribe(function (newValue) {
                   ownerViewModel.updateTask(ko.toJS(self));
               });

           }

           //Task List View Model
           function taskListViewModel() {

               //Handlers for our Hub callbacks

               this.hub = $.connection.tasks;
               this.tasks = ko.observableArray([]);
               this.newTaskText = ko.observable();

               var tasks = this.tasks;
               var self = this;
               var notify = true;

               //Initializes the view model
               this.init = function () {
                   this.hub.getAll();
               }

               //Handlers for our Hub callbacks

               this.hub.taskAll = function (allTasks) {

                   var mappedTasks = $.map(allTasks, function (item) {
                       return new taskViewModel(item.taskId, item.title,
                                item.completed, self)
                   });

                   tasks(mappedTasks);
               }

               this.hub.taskUpdated = function (t) {
                   var task = ko.utils.arrayFilter(tasks(), function (value) { return value.taskId == t.taskId; })[0];
                   notify = false;
                   task.title(t.title);
                   task.completed(t.completed);
                   notify = true;
               };

               this.hub.reportError = function (error) {
                   $("#error").text(error);
                   $("#error").fadeIn(1000, function () {
                       $("#error").fadeOut(3000);
                   });
               }

               this.hub.taskAdded = function (t) {
                   tasks.push(new taskViewModel(t.taskId, t.title, t.completed, self));
               };

               this.hub.taskRemoved = function (id) {
                   var task = ko.utils.arrayFilter(tasks(), function (value) { return value.taskId == id; })[0];
                   tasks.remove(task);
               };

               //View Model 'Commands'

               //To create a task
               this.addTask = function () {
                   var t = { "title": this.newTaskText(), "completed": false };
                   this.hub.add(t).done(function () {
                       console.log('Success!')
                   }).fail(function (e) {
                       console.warn(e);
                   });

                   this.newTaskText("");
               }

               //To remove a task
               this.removeTask = function (id) {
                   this.hub.remove(id);
               }

               //To update this task
               this.updateTask = function (task) {
                   if (notify)
                       this.hub.update(task);
               }

               //Gets the incomplete tasks
               this.incompleteTasks = ko.dependentObservable(function () {
                   return ko.utils.arrayFilter(this.tasks(), function (task) { return !task.completed() });
               }, this);

           }

           var vm = new taskListViewModel();
           ko.applyBindings(vm);
           // Start the connection
           $.connection.hub.start(function () { vm.init(); });

       });


   </script>
}
<div id="error" class="validation-summary-errors">
</div>
<h2> Add Task</h2>
<form data-bind="submit: addTask">
<input data-bind="value: newTaskText" class="ui-corner-all" placeholder="What needs to be done?" />
<input class="ui-button" type="submit" value="Add Task" />
<h2>Our Tasks</h2>
<br />
You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
<ul data-bind="template: { name: 'taskTemplate', foreach: tasks }, visible: tasks().length > 0">
</ul>
<script type="text/html" id="taskTemplate">
   <li  style="list-style-image: url('/images/task.png')">
       <input type="checkbox" data-bind="checked: completed" />
       <input class="ui-corner-all" data-bind="value: title, enable: !completed()" />
       <input class="ui-button" type="button" href="#" data-bind="click: remove" value="x"></input>
   </li>
</script>
<span data-bind="visible: incompleteTasks().length == 0">All tasks are complete</span>